<!--
    * @Author: whq
    * @Date: 2022-12-28 11:28:13
 * @LastEditTime: 2023-12-04 17:27:45
 * @LastEditors: whq
    * @Description: 
 * @FilePath: \pc-web-zjalny\src\view\home\index.vue
   -->
<template>
  <!-- 首页
    <A v-model:test1="test1" @update:eventFun="eventFun"></A>
    <div class="animated flip anibox">123123</div>
    <h1 :style="{
        height:'1400px'
    }">测试:{{ test1 }}</h1>
    <ScrollNumber :value="'7854'" />
    <div class="anibox" v-animate-onscroll="{down: 'animated flip', up: 'animated rotateOut' }">触发</div> -->
  <div class="box">
    <div class="top top-def" ref="topreference">
            <div class="top-logo">logo</div>
            <div class="top-nav-pro">
                <div class="top-nav">
                    <div class="top-nav-item">1</div>
                    <div class="top-nav-item">2</div>
                    <div class="top-nav-item">3</div>
                    <div class="top-nav-item">4</div>
                    <div class="top-nav-item">5</div>
                </div>
            </div>
            <div class="top-operate"></div>
        </div>
        <div class="comm">
            <div class="rotograph">轮播图</div>
            <div>
                <div id="reveal-top" class="animated slideInLeft anibox">123123</div>
                <div id="reveal-top" class="animated swing anibox">123123</div>
                <div id="reveal-top" class="animated jello anibox">123123</div>
                <div id="reveal-top" class="animated backInRight anibox">123123</div>
                <div id="reveal-top" class="animated backOutDown anibox">123123</div>
                <div id="reveal-top" class="animated backOutDown anibox">123123</div>
                <div id="reveal-top" class="animated bounceInDown anibox">123123</div>

            </div>
        </div>
        <div class="bottom"></div>
  </div>
</template>
<script setup lang="ts">
import globals from "@/store/globals";
import ScrollNumber from "../components/ScrollNumber.vue";
import { ref, onMounted, reactive } from "vue";
import scrollReveal from "scrollreveal";
import type { TabsPaneContext } from "element-plus";
console.log(globals().getInfo);

const topreference = ref<any>(null);
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//子组件 事件
const eventFun = (info: any) => {
  console.log(info, "=======组件 事件 数据===========");
};
const data = reactive({
  // 在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal(),
});
// 设置scrollReveal的方法
const retScroll = () => {
  // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
  data.scrollReveal.reveal("#reveal-top", {
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: "bottom",
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: "10px",
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: "cubic-bezier(0.5, 0, 0, 1)",
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: (ele: any) => {
      console.log(1);
    },
  });
};

const topreferenceEvent = () => {
  console.log(topreference.value.offsetTop);

  let offsetTop = topreference.value.offsetTop;
  var backTop = document.documentElement.scrollTop || document.body.scrollTop;

  console.log(backTop);

  //吸顶灯效果
  if (backTop > offsetTop) {
    topreference.value.className = "top top-ceiling animated fadeInDown";
  } else {
    topreference.value.className = "top top-def animated fadeIn";
  }
  console.log(topreference);
};
onMounted(() => {
  // 启动scrollReveal的方法
  retScroll();
  window.addEventListener("scroll", topreferenceEvent);
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
